<script setup>
import { ref, reactive, onBeforeMount } from "vue";
import useGoodsStore from "../../store/goodsStore";
import Dialog from "./dialog.vue";
import { addGoodsApi, uploadGoodsApi, goodsList } from "@/api/goodsApi";
import { listCategory } from "@/api/catesApi";
const goodsStore = useGoodsStore();

onBeforeMount(() => {
  // 获取商品数据
  // goodsStore.getGoodsAction()
  // // 获取总数
  // goodsStore.getGoodsTotalAction()
});
const uploadAction = ref("");
const dialogTitle = ref("");
const dialog = ref(null);
const dialogVisible = ref(false);
const formRef = ref(null);
const tableData = ref([]);
const form = reactive({
  category_id: "",
  goods_name: "",
  goods_img: "",
  goods_price: "",
  state: "0",
  selectArr: [],
  spaceArr: [
    {
      space_name: "", //规格名称
      space_values: "", //规格值
      space_price: "", //规格价格
      stock: "",
    }, //库存
  ],
});
//获取所有分类
const getClassif = async () => {
  const res = await listCategory();
  form.selectArr = res.msg;
  console.log(res);
};
//列表数据
const getData = async () => {
  const res = await goodsList();
  tableData.value = res.msg.data;
};
getData();
// 新增
function addGoods() {
  // 打开对话框
  dialogVisible.value = true;
  dialogTitle.value = "新增商品";
  getClassif();
}
// 编辑
function editGoods(goods) {
  // console.log(goods,'编辑')
  dialogVisible.value = true;
  dialogTitle.value = "编辑商品";
  // 打开对话框
}
// 删除
function confirmEvent(id) {
  // console.log(id,'删除')
}
//上传图片成功
const handleSuccess = (response, file) => {
  console.log(response, file);
  // form.goods_img = file
};
const upload = async (file) => {
  console.log(file);
  let fileData = new FormData();
  fileData.append("file", file.file);

  const res = await uploadGoodsApi(fileData);
  form.goods_img = "http://api.tp6admin.com/" + res.msg;
  console.log(res);
};
//选择分类
const cascChange = (v) => {};
//新增规格
const addSpace = () => {
  let param = {
    space_name: "", //规格名称
    value: "", //规格值
    // space_price: "", //规格价格
    // stock: "",
  };
  form.spaceArr.push(param);
};
//提交表单
const onSubmit = async () => {
  const res = await addGoodsApi(form);
  console.log(res);
};
</script>

<template>
  <el-card>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商城管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="right">
      <el-button @click="addGoods" type="primary">新增商品</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" max-height="400">
      <el-table-column type="expand">
        <template #default="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品编号">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="商品名称">
              <span>{{ props.row.goods_name }}</span>
            </el-form-item>
            <el-form-item label="商品图片">
              <span>
                <img
                  :src="props.row.goods_img"
                  style="height: 120px; width: auto"
                />
              </span>
            </el-form-item>
            <el-form-item label="商品单价">
              <span>{{ props.row.goods_price }}</span>
            </el-form-item>

            <el-form-item label="所属分类">
              <span>{{ props.row.category_id }}</span>
            </el-form-item>

            <!-- <el-form-item label="商品描述">
              <span v-html="props.row.description"></span>
            </el-form-item> -->
            <el-form-item label="商品状态">
              <el-tag type="success" size="small" v-if="props.row.state === 1"
                >启用</el-tag
              >
              <el-tag type="info" size="small" v-else>禁用</el-tag>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="商品 ID"
        prop="id"
        width="80"
        fixed
        align="center"
      />
      <el-table-column
        label="商品名称"
        prop="goods_name"
        width="150"
      ></el-table-column>
      <el-table-column
        label="商品图片"
        prop="goods_img"
        width="160"
        align="center"
      >
        <template v-slot="prop">
          <img :src="prop.row.goods_img" style="height: 90px; width: auto" />
        </template>
      </el-table-column>
      <el-table-column
        label="商品单价"
        prop="goods_price"
        width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="所属分类"
        prop="category_name"
        width="120"
        align="center"
      >
      </el-table-column>

      <el-table-column label="商品状态" width="100" align="center">
        <template v-slot="props">
          <el-tag type="success" size="small" v-if="props.row.state === 1"
            >启用</el-tag
          >
          <el-tag type="info" size="small" v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        fixed="right"
        min-width="150"
        align="center"
      >
        <template v-slot="prop">
          <el-button
            @click="editGoods(prop.row)"
            type="primary"
            size="small"
            round
            >编辑</el-button
          >
          <!-- 气泡确认框 -->
          <el-popconfirm
            width="160px"
            title="你确定要删除吗？"
            @confirm="confirmEvent(prop.row.id)"
          >
            <template #reference>
              <el-button type="danger" size="small" round>删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="goodsStore.total"
      :current-page="goodsStore.page"
      :page-size="goodsStore.size"
      :page-sizes="[1, 3, 5, 10, 20, 50, 100]"
      @size-change="changeSize"
      @current-change="changePage"
    />
  </el-card>
  <!-- 对话框 -->
  <el-dialog v-model="dialogVisible" ref="dialog" :title="dialogTitle">
    <div>
      <el-form :model="form" ref="formRef" label-width="80px">
        <el-form-item label="所属分类">
          <el-cascader
            :options="form.selectArr"
            v-model="form.category_id"
            clearable
            filterable
            :show-all-levels="false"
            :props="{
              expandTrigger: 'click',
              multiple: false,
              checkStrictly: true,
              emitPath: false,
              value: 'id',
              label: 'name',
            }"
            @change="cascChange"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="form.goods_name"></el-input>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :on-success="handleSuccess"
            :http-request="upload"
          >
            <img
              v-if="form.goods_img"
              :src="form.goods_img"
              style="width: 300px; height: 300px"
            />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input v-model="form.goods_price"></el-input>
        </el-form-item>
        <div style="display: flex; justify-content: end; margin-bottom: 10px">
          <el-button type="primary" @click="addSpace">add</el-button>
        </div>
        <div v-for="(item, index) in form.spaceArr">
          <el-form-item label="规格名称">
            <el-input
              v-model="item.space_name"
              placeholder="请输入规格名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="规格属性">
            <el-input
              v-model="item.space_values"
              placeholder="请输入规格属性"
            ></el-input>
            <el-input
              style="margin-top: 20px"
              v-model="item.space_price"
              placeholder="请输入规格价格"
            ></el-input>
            <el-input
              style="margin-top: 20px"
              v-model="item.stock"
              placeholder="请输入库存"
            ></el-input>
          </el-form-item>
        </div>

        <el-form-item label="商品状态">
          <el-switch v-model="form.state" active-value="1" inactive-value="0">
          </el-switch>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
.el-pagination {
  margin: 20px auto;
}
</style>
